import { defineComponent, watch } from "vue";
import { getUUid } from "@/focus/path/until";
import "./index.less";
import { focusStore } from "@/focus/store";
// 定义函数类型
export default defineComponent({
  name: "focus-popup",
  props: {
    uid: {
      type: String,
      default: getUUid()
    },
  },

  setup(props) {
    const focusInject = focusStore.inject()
    const nowIdx = focusInject.state.popupList.value.findIndex(v => v.uid === props.uid)
    const nowPopup = focusInject.state.popupList.value[nowIdx]
    // const timer: { value?: number } = {}
    // const amimiteTime = 200
    watch(() => nowPopup?.visible, (ev) => {
      // clearTimeout(timer.value)
      // timer.value = undefined
      if (ev === false) {
        // timer.value = setTimeout(() => {
        //   timer.value = undefined
          focusInject.state.popupList.value.splice(nowIdx, 1)
        // }, amimiteTime);
      }
    }, { immediate: true })
    return {
      nowPopup,
    }
  },
  render() {
    return this.nowPopup ? <div class="fe-popup" style={{ display: this.nowPopup.visible ? "block" : "none", zIndex: this.nowPopup.zIndex }} id={this.$props.uid}>
      <div class="fe-popup-mask pagewh"></div>
      <div class="fe-popup-content pagewh">{this.$slots.default}</div>
    </div> : null
  }
})
